<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>红绿灯</title>
	</head>
	<style type="text/css">
		.box {
			overflow: hidden;
			width: 400px;
			padding: 10px;
			background: black;
			border-radius: 20px;
			display: flex;
		}

		.box div {
			width: 33.33%;
			float: left;
			text-align: center;
			display: flex;
			flex: 1;
			align-items: center;
			justify-content: center;
		}

		.green {
			width: 100px;
			height: 100px;
			background: #D7D7D7;
			border-radius: 100px;
			display: block;
			margin: Opxauto;
			line-height: 100px;
			font-size: 80px;
			color: #D7D7D7;
		}
			
		.yellow {
			width: 100px;
			height: 100px;
			background: #D7D7D7;
			border-radius: 100px;
			display: block;
			margin: Opxauto;
			line-height: 100px;
			font-size: 80px;
			color: #D7D7D7;
		}
			
		.red {
			width: 100px;
			height: 100px;
			background: #D7D7D7;
			border-radius: 100px;
			display: block;
			margin: Opxauto;
			line-height: 100px;
			font-size: 80px;
			color: #D7D7D7;
		}
	</style>
	<body>
		<div class="box">
			<div><span class="green"></span></div>
			<div><span class="yellow"></span></div>
			<div><span class="red"></span></div>
		</div>
		<script type="text/javascript">
			window.onload = function(){
				var time = 10;//可以设置红绿灯时间
				exec();
				setInterval(function() {
					exec();
				},1000*(time*2+3));
				
				function exec(){
					//绿灯
					green();
					
					//黄灯
					setTimeout(function(){
						yellow();
					},1000*time);
					
					//红灯
					setTimeout(function(){
						red();
					},1000*(time+3));
				}
				function red(){
					var num = time;
					var timer = setInterval(function(){
						num--;
						var red=document.getElementsByClassName('red');
						red[0].innerHTML = num;
						red[0].style.background = 'red';
						if(num==-1){
							clearInterval(timer);
							red[0].innerHTML='';
							red[0].style.background='';
						}
					},1000);
				}
				function yellow(){
					var num = 3;//黄灯设置了3秒
					var timer = setInterval(function(){
						num--;
						var yellow=document.getElementsByClassName('yellow');
						yellow[0].innerHTML = num;
						yellow[0].style.background = 'yellow';
						if(num==-1){
							clearInterval(timer);
							yellow[0].innerHTML='';
							yellow[0].style.background='';
						}
					},1000);
				}
				
				function green(){
					var num = time;//黄灯设置了3秒
					var timer = setInterval(function(){
						num--;
						var green=document.getElementsByClassName('green');
						green[0].innerHTML = num;
						green[0].style.background = 'green';
						if(num==-1){
							clearInterval(timer);
							green[0].innerHTML='';
							green[0].style.background='';
						}
					},1000);
				}
			}			
		</script>
	</body>
</html>
